<template>
	<view>
		<view class="member-tip">仅显示未分组的经纪人，每个经纪人只能加入1个分组</view>
		<view class="search-box flex item-center justify-between">
			<view class="flex item-center">
				<image src="@/static/svg/icon-search.svg" mode="heightFix" class="icon-search"></image>
				<input type="text" placeholder="搜索经纪人昵称" v-model="nickName" class="search-inp">
			</view>
			<view class="flex item-center">
				<image src="../../../static/svg/icon-input-clean.svg" mode="widthFix" :style="{width:'20px'}" @click="cleanText" v-if="nickName.length"></image>
				<view class="search-text" @click="searchNickName">搜索</view>
			</view>

		</view>
		<scroll-view scroll-y="true" :style="{'height':h}" @scrolltolower='scrolltolower' refresher-enabled='true'
			:refresher-triggered="triggered" @refresherrestore="onRestore" @refresherrefresh="onRefresh">
			<view v-for="item,index in list" v-if="list.length" class="agent-box flex justify-between item-center" :key="item.id" @click="selItem(item)">
				<image src="@/static/svg/radio-blue-selected.svg" mode="" class="radio-default"  v-if="selOffList.includes(item.userId)"></image>
				<image src="@/static/svg/radio-default.svg" mode="" class="radio-default"  v-else></image>
				<image :src="item.avatar" mode="" class="img-avatar"></image>
				<view class="agent-info flex flex-col justify-between">
					<view class="nick-name">
						{{item.nickName}}
					</view>
					<view class="total-settle">已分销：<text class="red-price">¥{{item.totalOrderAmt}}</text>（共{{item.totalOrderCount}}单）</view>
				</view>
			</view>
			<view v-else class="flex flex-col item-center justify-center" :style="{'height':h}">
				<image src="@/pagesD/static/role/icon-k-page.svg" mode="heightFix" style="height: 149px;"></image>
				<view class="k-text">没有您要找的人哦～</view>
			</view>
		</scroll-view>
		<view class="batch-btn-box flex item-center justify-between">
			<view  class="flex item-center" @click="ChangeSelOffList()">
				<image src="@/static/svg/radio-blue-selected.svg" mode="" class="radio-default" v-if="list.length && list.length == selOffList.length"></image>
				<image src="@/static/svg/radio-default.svg" mode="" class="radio-default" v-else></image>
				全选
			</view>
			<view  class="flex item-center">
				<text >已选择<text>{{selOffList.length}}</text>人</text>
				<view class="release-btn" @click="submitFn()" :class="{'unactive':!selOffList.length}">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup>

	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance,
		watch,
		onMounted
	} from 'vue'
	import {
		pageGroupAgent,
		saveGroup
	} from '@/pagesD/api/group.js'
	import {
		mathHeight
	} from '@/utils/index.js'
	const h = ref(0)
	h.value = mathHeight(160)
	const triggered = ref(false)
	let list = ref([])
	let total = ref(0)
	let getOpenerEventChannel = ref(null)
	const selOffList = ref([])
	const groupName = ref('')
	const commissionRate = ref()
	const id = ref('')
	const params = ref({
		groupId: '',
		pageNum: 1,
		pageSize: 15,
		nickName:''
	})
	const nickName = ref('')

	const getList = async () => {
		triggered.value = true
		uni.showLoading()
		let result = await pageGroupAgent(params.value)
		if (result) {
			list.value = params.value.pageNum == 1 ? result.list : (list.value).concat(result.list)
			total.value = result.total
		}
		uni.hideLoading()
		triggered.value = false
	}
	const scrolltolower = () => {
		if (list.value.length >= total.value) {
			return
		}
		params.value.pageNum = params.value.pageNum + 1
		getList()
	}
	const onRestore = () => {
		// setTimeout(() =>{
		triggered.value = false; // 需要重置
		// },2000)
		// console.log("onRestore");
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList()
	}
	const cleanText = () => {
		params.value.nickName = ''
		nickName.value = ''
		reFresh()
	}
	const searchNickName = () => {
		params.value.nickName = nickName.value
		reFresh()
	}
	// watch(() => params.value.nickName,() =>{
	// 	reFresh()
	// })
	const activeList = () => {
		batch.value = !batch.value
		selOffList.value = []
	}
	const ChangeSelOffList = () => {
		if(selOffList.value.length !=list.value.length) {
			selOffList.value
			= (list.value).map(item => {
				return item.userId
			})
		}else {
			selOffList.value = []
		}
	}
	const selItem = (item) => {
		if(selOffList.value.includes(item.userId)){
			selOffList.value.splice(selOffList.value.indexOf(item.userId),1)
		}else{
			selOffList.value.push(item.userId)
		}
	}
	const submitFn = async () =>{
		if(!selOffList.value.length){
			uni.showToast({
				icon: 'none',
				title: `请选择至少一个成员`
			})
			return
		}
		uni.showLoading()
		let obj = {
			groupName:groupName.value,
			commissionRate: commissionRate.value,
			userIds:selOffList.value
		}
		if(id.value){
			obj.id = id.value
		}

		let result = await saveGroup(obj)
		uni.hideLoading()
		if(result){
			uni.showToast({
				icon: 'none',
				title:'保存成功'
			})
			getOpenerEventChannel.value.emit('reFreshPage',{id:result})
			setTimeout(()=>{
				uni.navigateBack({
					delta:1
				})
			},1000)
		}else{
			uni.showToast({
				icon: 'none',
				title: '保存失败，请稍后再试'
			})
		}
	}
	const onRefresh = () => {
		triggered.value = true
		reFresh()
	}
	onLoad((query) => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel();
		getOpenerEventChannel.value.on('acceptData',data => {
			groupName.value = data.groupName
			commissionRate.value = data.commissionRate
			if(data.id){
				id.value = data.id
			}
		})
	})
	onMounted(() => {
		getList()
	})
</script>

<style scoped lang="scss">
.member-tip{
	background: rgba(227, 227, 227, 1);
	font-family: PingFang SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: center;
	color: rgba(51, 51, 51, 0.6);
}

.search-box {
	margin: 20px;
	// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
	background-color: #ffffff;
	border-radius: 8px;
	padding: 0px 10px;
	height: 36px;

	.icon-search {
		height: 20px;
	}
	.search-inp {
		width: calc(100% - 80px);
		margin-left: 10px;
		font-size: 12px;
	}
}
.radio-default {
	height: 24px;
	width: 24px;
	margin: 0 10px 0 20px;
}

.agent-box {
	padding: 8px 0px;
	// margin: 0 20px 20px;
	background-color: #ffffff;
	border-radius: 8px;

	.agent-info {
		width: calc(100% - 80px);
		margin-left: 10px;
		height: 45px;
	}

	.img-avatar {
		width: 45px;
		height: 45px;
		border-radius: 8px;
	}

	.icon-list {
		width: 16px;
		height: 16px;
		margin-left: 4px;
	}

	.nick-name {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
	}

	.total-settle {
		font-size: 12px;
		font-weight: 400;
		// line-height: 17px;
		color: rgba(51, 51, 51, 0.6);
	}

	.red-price {
		color: rgba(250, 69, 67, 1);
	}
	.group-name{
		font-size: 12px;
		background-color: rgba(250, 69, 67, 0.6);
		padding: 0 4px;
		color: #ffffff;
		margin-left: 4px;
	}
}
.release-btn {
	// width: 343px;
	height: 46px;
	padding: 12px, 20px, 12px, 20px;
	border-radius: 8px;
	// gap: 10px;
	background: #FA4543;
	color: #ffffff;
	margin: 5px 20px;
	text-align: center;
	line-height: 46px;
	&.unactive{
		background: rgba(250, 69, 67, 0.6);
	}
}
.batch-btn-box{
	font-size: 12px;
	.radio-default{
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
	.release-btn {
		width: 129px;
		&.unactive{
			background: rgba(250, 69, 67, 0.6);
		}
	}
	.sel-num{
		color: #FA4543;
	}
}
	.search-text{
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		text-align: center;
		color: rgba(250, 69, 67, 1);
		margin-left: 10px;
	}
	.k-text{
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		text-align: center;
		margin-top: 20px;
	}
</style>
